{% extends "base.html" %}
{% load i18n %}

{% block extra_js %}
<script type="text/javascript">
function initialize() {
	var mapOptions = {
		zoom: 1,
		center: new google.maps.LatLng( 0, 0 ),
		mapTypeId: google.maps.MapTypeId.ROADMAP,
	}
	map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
	
	{% if datas %}
		var marker;
		{% for data in datas %}
		marker = new google.maps.Marker({
	                        position: new google.maps.LatLng({{ data.pt }}),
	                        map: map
				});
		{% endfor %}
	{% endif %}
}
function loadScript() {
	var script = document.createElement("script");
	script.type = "text/javascript";
	script.src = "http://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize";
	document.body.appendChild(script);
}
window.onload = loadScript;
</script>
{% endblock %}

{% block base_content %}
<div class='container'>
	<div class='row'>
		<div class='col-md-12'>
			<div class='display'>
				<div class="page-header"></div>
				<div id="map_canvas" style="width:50%; height:300px"></div>
			</div>
			<div class="row">
			<form method="post" class="col-md-6">
				{% csrf_token %}
				<div class='form-group'>
				<input type="submit" class="form-control" value="Add Random"/>
				</div>
			</form>
			</div>
			<div class="row">
				<div class="col-md-6">
					<input type="text" name="minLat" class="form-control" placeholder="min lat" />
				</div>
				<div class="col-md-6">
					<input type="text" name="minLng" class="form-control" placeholder="min lng" />
				</div>
			</div>
			<button class="btn btn-info" onclick=testGql()>Query</button>
			<div class="row">
				<div class="col-md-6">
					<div id="resultMap_canvas" style="width:100%; height:300px"></div>
				</div>
			</div>
			<script type="text/javascript">
			isInit = false;
			resultMap = null;
			markerArr = [];
			queryPt = null;
			queryMarker = null;
			
			function initMarkers() {
				for( i in markerArr ) markerArr[i].setMap(null);
				markerArr = []; 
			}
			function initResultMap() {
				if( isInit ) return;
				isInit = true;
				
				var mapOptions = {
					zoom: 1,
					center: new google.maps.LatLng( 0, 0 ),
					mapTypeId: google.maps.MapTypeId.ROADMAP,
				}
				resultMap = new google.maps.Map(document.getElementById("resultMap_canvas"), mapOptions);
			}
			function renderResultMap(pts) {
				initMarkers();
				
				for( i in pts )
				{
					pt = pts[i];
					var marker = new google.maps.Marker({
				                        position: new google.maps.LatLng(pt.lat, pt.lng),
				                        map: resultMap
				                        });
                    markerArr.push(marker);
				}
			}
			
			function testGql(){
				initResultMap();
				
				latval = parseFloat( $('input[name=minLat]').val() );
				lngval = parseFloat( $('input[name=minLng]').val() );
				if( isNaN(latval) || isNaN(lngval) ) return;
				
				queryPt = {
					"lat": latval,
					"lng": lngval
					};
				Dajaxice.data.testGqlGeoptAjax(resultCallback, {'minPt': queryPt });
			}
			
			function resultCallback(quy) {
				console.log('query result : ' + quy.result ); 
				if( quy.result )
				{
					renderResultMap(quy.pts);
					if( queryMarker ) queryMarker.setMap(null);
					queryMarker = new google.maps.Marker({
				                        position: new google.maps.LatLng(queryPt.lat, queryPt.lng),
				                        map: resultMap
				                        });
				}
			}
			</script>
		</div>
	</div>
</div>
{% endblock %}